<template>
	<view class="goshop-merchant-container" v-if="data.length > 0">
		<view class="goshop-merchant-box" v-for="(item,index) in data" :key="index" @tap="$Router.push({ path: '/pages/common/center/center', query: { id: item.memberInfo.id}})">
				<!-- <image class="goshop-merchant-bg" :src="item.memberInfo.avatar"></image> -->
				<view class="goshop-merchant-wrap">
					<view class="goshop-merchant-wrap-left">
						<view><image class="goshop-img-62" :src="item.memberInfo.avatar"></image></view>
						<view v-if="locale === 'zh-Hans'">{{item.memberInfo.provinceName}}</view>
					</view>
					<view class="goshop-merchant-wrap-right">
						<view class="row-x">
							<view>{{item.memberInfo.nickname}}</view>
							<view class="u-m-l-10">
								<goshop-sex :mode="2" :sex="item.memberInfo.sex" :age="item.memberInfo.age"></goshop-sex>
							</view>
						</view>
						<view class="u-m-t-10">
							<goshop-level :data="item.memberInfo.levelInfo"></goshop-level>
						</view>
						<view class="row-x u-m-t-10">
							<view class="iconfont iconfont-detail" v-if="item.memberInfo.intro" style="width: 24px;height: 24px;"></view>
							<view style="flex: 3;" class="u-m-l-10">
								{{item.memberInfo.intro}}
							</view>
						</view>
					</view>
					<view class="goshop-merchant-start">
						<view class="iconfont iconfont-play" style="width: 30px;height: 30px;" @tap.stop="videoShow(item.memberInfo.video)"></view>
					</view>
				</view>
		</view>
		<goshop-video :videoPlay="videoPlay" :videoUrl="videoUrl" @videoPlay="showVideo"></goshop-video>
	</view>
</template>

<script>
	export default {
		name:"goshop-merchant-display",
		props: {
		  data:{
			type:Array,
			default:()=>[]
		  },
		},
		created(){
			this.locale = this.$i18n.locale;	
		},
		data() {
			return {
				videoPlay: false,
				videoUrl: '',
				locale:'',
			};
		},
		methods:{
			showVideo(flag){
				this.videoPlay = flag;
			},
			// 触发全屏播放的点击事件
			videoShow(url) {
			  this.videoUrl = url;
			  this.videoPlay = true;  // 显示播放盒子
			},
		}
	}
</script>

<style lang="scss">
.goshop-merchant-bg{
	position: absolute;
    width: 100%;
	filter: blur(3px);
	height: 320rpx;
}

.goshop-merchant-container{
	padding: 20rpx;
	height: 320rpx;
	width: 100%;
	box-sizing: border-box;
}
.goshop-merchant-box{
	position: relative;
	height: 320rpx;
	margin-bottom: 20rpx;
}
.goshop-merchant-wrap{
	display: flex;
	//z-index: 1000;
	position: absolute;
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	height: 100%;
	background-color: #FFE53B;
	background-image: linear-gradient(147deg, #FFE53B 0%, #FF2525 37%, #ff6a88 100%);

}
.goshop-merchant-wrap-right{
	flex: 3;
	padding-left: 10px;
}
.goshop-merchant-start{
	position: absolute;
	bottom: 0;
	right: 0;
	margin-right: 10px;
	margin-bottom: 10px;
}
</style>